<template>
  <div class="upload-container">
    <div v-if="files.length > 0" class="file-list">
      <div v-for="(file, index) in files" :key="index" class="file-item">
        <div class="file-info">
          <span class="file-name">{{ file.name }}</span>
          <span class="file-size">({{ formatFileSize(file.size) }})</span>
        </div>
        <div class="file-actions">
          <el-button type="danger" size="small" @click="removeFile(index)">删除</el-button>
        </div>
      </div>
    </div>

    <el-upload
        class="upload-area"
        drag
        multiple
        :show-file-list="false"
        :before-upload="beforeUpload"
        :http-request="handleUpload"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击上传</em>
      </div>
    </el-upload>

    <div class="upload-tips">
      <p>支持格式：PDF, DOC, DOCX, JPG, PNG</p>
      <p>单个文件大小不超过 10MB</p>
    </div>
  </div>
</template>

<script setup >
import { ref,defineProps } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { uploadFile } from '@/api/base'

const props = defineProps({
  row: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:files'])

const files = ref(props.row.files || [])

const beforeUpload = (file) => {
  const allowedTypes = [
    'application/pdf',
    'image/jpeg',
    'image/png',
    'application/msword',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  ]

  const isAllowed = allowedTypes.includes(file.type)
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isAllowed) {
    ElMessage.error('不支持的文件格式!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB!')
    return false
  }
  return true
}

const handleUpload = async (options) => {
  try {
    const file = options.file
    const formData = new FormData()
    formData.append('file', file)

    const response = await uploadFile(formData)

    files.value.push({
      name: file.name,
      size: file.size,
      url: response.data.url,
      type: file.type,
      uploadedAt: new Date()
    })

    emit('update:files', files.value)
    ElMessage.success('文件上传成功')
  } catch (error) {
    ElMessage.error('文件上传失败')
  }
}

const removeFile = (index) => {
  files.value.splice(index, 1)
  emit('update:files', files.value)
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i])
}
</script>

<style scoped>
.upload-container {
  padding: 20px;
}

.file-list {
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #fafafa;
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.file-size {
  font-size: 12px;
  color: #909399;
}

.upload-area {
  margin-bottom: 15px;
}

.upload-tips {
  font-size: 12px;
  color: #909399;
  text-align: center;
}
</style>
